/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  Text,
  TouchableOpacity, Button
} from 'react-native';
import { createStackNavigator } from "react-navigation";
import routerList from './test/routerList';


class MainPage extends React.Component {
  static navigationOptions = {
    title: 'RN61App Test',
  };
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView contentContainerStyle={styles.scrollView}>
          {Object.keys(routerList).map((screen, index) => (
            <TouchableOpacity
              key={index}
              style={styles.button}
              onPress={() => this.props.navigation.navigate(screen)}>
              <Text style={styles.buttonText}>{screen}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const RootStack = createStackNavigator(
  { MainPage: MainPage, ...routerList },
  { headerMode: 'none', initialRouteName: 'MainPage', }
)

export default class App extends React.Component {

  render() {
    return (
      <RootStack />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollView: {
    alignItems: 'center',
    padding: 20,
  },
  button: {
    backgroundColor: '#1890ff',
    paddingVertical: 15,
    paddingHorizontal: 30,
    borderRadius: 8,
    marginVertical: 10,
    width: '80%',
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: '600',
  },
})
